<html>
<head>
<title>Page02_Book_AddOrEdit.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #a9b7c6;}
.s1 { color: #faa23d;}
.s2 { color: #aa7dfc;}
.s3 { color: #e2da90;}
.s4 { color: #52cb54;}
.s5 { color: #bbb529;}
.s6 { color: #db7e9b;}
.s7 { color: #b3e54c;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
Page02_Book_AddOrEdit.ets</font>
</center></td></tr></table>
<pre><span class="s0">import </span><span class="s1">{ </span><span class="s0">promptAction </span><span class="s1">} </span><span class="s0">from </span><span class="s2">'@kit.ArkUI'</span><span class="s3">;</span>
<span class="s0">import http from </span><span class="s2">'@ohos.net.http'</span><span class="s3">;</span>
<span class="s0">import router from </span><span class="s2">'@ohos.router'</span><span class="s3">;</span>
<span class="s4">// 导入外号</span>
<span class="s0">import </span><span class="s1">{ </span><span class="s0">Book</span><span class="s3">, </span><span class="s0">creator </span><span class="s1">} </span><span class="s0">from </span><span class="s2">'./Page01_Book_Index'</span><span class="s3">;</span>


<span class="s4">// 编辑页也需要使用。导出</span>
<span class="s0">interface AddResponse </span><span class="s1">{</span>
  <span class="s0">message</span><span class="s3">: </span><span class="s0">string</span>
  <span class="s0">data</span><span class="s3">: </span><span class="s0">Book</span>
<span class="s1">}</span>

<span class="s0">interface RouterParams </span><span class="s1">{</span>
  <span class="s0">id</span><span class="s3">: </span><span class="s0">number</span>
<span class="s1">}</span>


<span class="s5">@</span><span class="s0">Entry</span>
<span class="s5">@</span><span class="s0">Component</span>
<span class="s0">struct BookShelf_Add </span><span class="s1">{</span>
  <span class="s5">@</span><span class="s0">State bookname</span><span class="s3">: </span><span class="s0">string </span><span class="s3">= </span><span class="s2">''</span>
  <span class="s5">@</span><span class="s0">State author</span><span class="s3">: </span><span class="s0">string </span><span class="s3">= </span><span class="s2">''</span>
  <span class="s5">@</span><span class="s0">State publisher</span><span class="s3">: </span><span class="s0">string </span><span class="s3">= </span><span class="s2">''</span>
  <span class="s0">req </span><span class="s3">= </span><span class="s0">http</span><span class="s3">.</span><span class="s0">createHttp</span><span class="s6">()</span>
  <span class="s0">isID </span><span class="s3">= -</span><span class="s7">1</span>

  <span class="s0">async aboutToAppear</span><span class="s6">()</span><span class="s3">: </span><span class="s0">Promise</span><span class="s3">&lt;</span><span class="s0">void</span><span class="s3">&gt; </span><span class="s1">{</span>
    <span class="s0">await this</span><span class="s3">.</span><span class="s0">addResponse</span><span class="s6">()</span><span class="s3">;</span>
  <span class="s1">}</span>

  <span class="s0">private async addResponse</span><span class="s6">() </span><span class="s1">{</span>
    <span class="s0">const params </span><span class="s3">= </span><span class="s0">router</span><span class="s3">.</span><span class="s0">getParams</span><span class="s6">() </span><span class="s0">as RouterParams</span><span class="s3">;</span>
    <span class="s0">this</span><span class="s3">.</span><span class="s0">isID </span><span class="s3">= </span><span class="s0">params</span><span class="s3">.</span><span class="s0">id</span>
    <span class="s0">const Req </span><span class="s3">= </span><span class="s0">await this</span><span class="s3">.</span><span class="s0">req</span><span class="s3">.</span><span class="s0">request</span><span class="s6">(</span><span class="s2">'https://hmajax.itheima.net/api/books/' </span><span class="s3">+ </span><span class="s0">params</span><span class="s3">.</span><span class="s0">id</span><span class="s6">)</span><span class="s3">;</span>
    <span class="s0">const result </span><span class="s3">= </span><span class="s0">JSON</span><span class="s3">.</span><span class="s0">parse</span><span class="s6">(</span><span class="s0">Req</span><span class="s3">.</span><span class="s0">result as string</span><span class="s6">) </span><span class="s0">as AddResponse</span><span class="s3">;</span>
    <span class="s0">this</span><span class="s3">.</span><span class="s0">bookname </span><span class="s3">= </span><span class="s0">result</span><span class="s3">.</span><span class="s0">data</span><span class="s3">.</span><span class="s0">bookname</span><span class="s3">;</span>
    <span class="s0">this</span><span class="s3">.</span><span class="s0">author </span><span class="s3">= </span><span class="s0">result</span><span class="s3">.</span><span class="s0">data</span><span class="s3">.</span><span class="s0">author</span><span class="s3">;</span>
    <span class="s0">this</span><span class="s3">.</span><span class="s0">publisher </span><span class="s3">= </span><span class="s0">result</span><span class="s3">.</span><span class="s0">data</span><span class="s3">.</span><span class="s0">publisher</span><span class="s3">;</span>
  <span class="s1">}</span>

  <span class="s0">build</span><span class="s6">() </span><span class="s1">{</span>
    <span class="s0">Navigation</span><span class="s6">() </span><span class="s1">{</span>

      <span class="s0">Column</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s7">10 </span><span class="s1">}</span><span class="s6">) </span><span class="s1">{</span>
        <span class="s0">Row</span><span class="s6">() </span><span class="s1">{</span>
          <span class="s0">Text</span><span class="s6">(</span><span class="s2">'图书姓名:'</span><span class="s6">)</span>
          <span class="s0">TextInput</span><span class="s6">(</span><span class="s1">{</span>
            <span class="s0">placeholder</span><span class="s3">: </span><span class="s2">'请输入图书名字'</span><span class="s3">,</span>
            <span class="s0">text</span><span class="s3">: </span><span class="s0">$$this</span><span class="s3">.</span><span class="s0">bookname</span>
          <span class="s1">}</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">height</span><span class="s6">(</span><span class="s7">30</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s3">.</span><span class="s0">Transparent</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s6">(</span><span class="s7">1</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s7">10</span><span class="s3">, </span><span class="s0">top</span><span class="s3">: </span><span class="s7">0</span><span class="s3">, </span><span class="s0">bottom</span><span class="s3">: </span><span class="s7">0 </span><span class="s1">}</span><span class="s6">)</span>
        <span class="s1">}</span>

        <span class="s0">Divider</span><span class="s6">()</span>
        <span class="s0">Row</span><span class="s6">() </span><span class="s1">{</span>
          <span class="s0">Text</span><span class="s6">(</span><span class="s2">'图书作者:'</span><span class="s6">)</span>
          <span class="s0">TextInput</span><span class="s6">(</span><span class="s1">{</span>
            <span class="s0">placeholder</span><span class="s3">: </span><span class="s2">'请输入图书作者'</span><span class="s3">,</span>
            <span class="s0">text</span><span class="s3">: </span><span class="s0">$$this</span><span class="s3">.</span><span class="s0">author</span>
          <span class="s1">}</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">height</span><span class="s6">(</span><span class="s7">30</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s3">.</span><span class="s0">Transparent</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s6">(</span><span class="s7">1</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s7">10</span><span class="s3">, </span><span class="s0">top</span><span class="s3">: </span><span class="s7">0</span><span class="s3">, </span><span class="s0">bottom</span><span class="s3">: </span><span class="s7">0 </span><span class="s1">}</span><span class="s6">)</span>
        <span class="s1">}</span>

        <span class="s0">Divider</span><span class="s6">()</span>
        <span class="s0">Row</span><span class="s6">() </span><span class="s1">{</span>
          <span class="s0">Text</span><span class="s6">(</span><span class="s2">'图书出版社:'</span><span class="s6">)</span>
          <span class="s0">TextInput</span><span class="s6">(</span><span class="s1">{</span>
            <span class="s0">placeholder</span><span class="s3">: </span><span class="s2">'请输入图书出版社'</span><span class="s3">,</span>
            <span class="s0">text</span><span class="s3">: </span><span class="s0">$$this</span><span class="s3">.</span><span class="s0">publisher</span>
          <span class="s1">}</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">height</span><span class="s6">(</span><span class="s7">30</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s6">(</span><span class="s0">Color</span><span class="s3">.</span><span class="s0">Transparent</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s6">(</span><span class="s7">1</span><span class="s6">)</span>
            <span class="s3">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s7">10</span><span class="s3">, </span><span class="s0">top</span><span class="s3">: </span><span class="s7">0</span><span class="s3">, </span><span class="s0">bottom</span><span class="s3">: </span><span class="s7">0 </span><span class="s1">}</span><span class="s6">)</span>
        <span class="s1">}</span>

        <span class="s0">Divider</span><span class="s6">()</span>


        <span class="s0">Button</span><span class="s6">(</span><span class="s2">'保存'</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">width</span><span class="s6">(</span><span class="s2">'100%'</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">margin</span><span class="s6">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s7">20 </span><span class="s1">}</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">type</span><span class="s6">(</span><span class="s0">ButtonType</span><span class="s3">.</span><span class="s0">Normal</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">borderRadius</span><span class="s6">(</span><span class="s7">10</span><span class="s6">)</span>
          <span class="s3">.</span><span class="s0">onClick</span><span class="s6">(</span><span class="s0">async </span><span class="s6">() </span><span class="s3">=&gt; </span><span class="s1">{</span>
            <span class="s4">// 1. 非空判断</span>
            <span class="s0">if </span><span class="s6">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">bookname </span><span class="s3">== </span><span class="s2">'' </span><span class="s3">|| </span><span class="s0">this</span><span class="s3">.</span><span class="s0">author </span><span class="s3">== </span><span class="s2">'' </span><span class="s3">|| </span><span class="s0">this</span><span class="s3">.</span><span class="s0">publisher </span><span class="s3">== </span><span class="s2">''</span><span class="s6">) </span><span class="s1">{</span>
              <span class="s0">promptAction</span><span class="s3">.</span><span class="s0">showToast</span><span class="s6">(</span><span class="s1">{</span>
                <span class="s0">message</span><span class="s3">: </span><span class="s2">'书本信息不能为空，请检查哦~ ღ( ´･ᴗ･` )比心'</span>
              <span class="s1">}</span><span class="s6">)</span>
              <span class="s4">// 提示用户</span>
              <span class="s0">return</span>
            <span class="s1">}</span>
            <span class="s0">if </span><span class="s6">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">isID </span><span class="s3">=== -</span><span class="s7">1</span><span class="s6">) </span><span class="s1">{</span>
              <span class="s0">await this</span><span class="s3">.</span><span class="s0">req</span><span class="s3">.</span><span class="s0">request</span><span class="s6">(</span><span class="s2">'https://hmajax.itheima.net/api/books'</span><span class="s3">, </span><span class="s1">{</span>
                <span class="s0">method</span><span class="s3">: </span><span class="s0">http</span><span class="s3">.</span><span class="s0">RequestMethod</span><span class="s3">.</span><span class="s0">POST</span><span class="s3">,</span>
                <span class="s0">extraData</span><span class="s3">: </span><span class="s1">{</span>
                  <span class="s0">bookname</span><span class="s3">: </span><span class="s0">this</span><span class="s3">.</span><span class="s0">bookname</span><span class="s3">,</span>
                  <span class="s0">author</span><span class="s3">: </span><span class="s0">this</span><span class="s3">.</span><span class="s0">author</span><span class="s3">,</span>
                  <span class="s0">publisher</span><span class="s3">: </span><span class="s0">this</span><span class="s3">.</span><span class="s0">publisher</span><span class="s3">,</span>
                  <span class="s0">creator</span><span class="s3">: </span><span class="s0">creator</span>
                <span class="s1">}</span><span class="s3">,</span>
                <span class="s0">header</span><span class="s3">: </span><span class="s1">{}</span>
              <span class="s1">}</span><span class="s6">)</span>
              <span class="s0">router</span><span class="s3">.</span><span class="s0">back</span><span class="s6">()</span>
              <span class="s0">return</span>
            <span class="s1">}</span>
            <span class="s0">const params </span><span class="s3">= </span><span class="s0">router</span><span class="s3">.</span><span class="s0">getParams</span><span class="s6">() </span><span class="s0">as RouterParams</span><span class="s3">;</span>
            <span class="s0">await this</span><span class="s3">.</span><span class="s0">req</span><span class="s3">.</span><span class="s0">request</span><span class="s6">(</span><span class="s2">'https://hmajax.itheima.net/api/books/' </span><span class="s3">+ </span><span class="s0">params</span><span class="s3">.</span><span class="s0">id</span><span class="s3">, </span><span class="s1">{</span>
              <span class="s0">method</span><span class="s3">: </span><span class="s0">http</span><span class="s3">.</span><span class="s0">RequestMethod</span><span class="s3">.</span><span class="s0">PUT</span><span class="s3">,</span>
              <span class="s0">extraData</span><span class="s3">: </span><span class="s1">{</span>
                <span class="s0">bookname</span><span class="s3">: </span><span class="s0">this</span><span class="s3">.</span><span class="s0">bookname</span><span class="s3">,</span>
                <span class="s0">author</span><span class="s3">: </span><span class="s0">this</span><span class="s3">.</span><span class="s0">author</span><span class="s3">,</span>
                <span class="s0">publisher</span><span class="s3">: </span><span class="s0">this</span><span class="s3">.</span><span class="s0">publisher</span><span class="s3">,</span>
                <span class="s0">creator</span><span class="s3">: </span><span class="s0">creator</span>
              <span class="s1">}</span><span class="s3">,</span>
              <span class="s0">header</span><span class="s3">: </span><span class="s1">{}</span>
            <span class="s1">}</span><span class="s6">)</span>
            <span class="s4">// TODO  根据新增和编辑 调用不同的接口</span>
            <span class="s0">router</span><span class="s3">.</span><span class="s0">back</span><span class="s6">()</span>
          <span class="s1">}</span><span class="s6">)</span>

      <span class="s1">}</span>
      <span class="s3">.</span><span class="s0">padding</span><span class="s6">(</span><span class="s7">20</span><span class="s6">)</span>
    <span class="s1">}</span>
    <span class="s3">.</span><span class="s0">title</span><span class="s6">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">isID </span><span class="s3">== -</span><span class="s7">1 </span><span class="s3">? </span><span class="s2">'新增图书' </span><span class="s3">: </span><span class="s2">'修改图书'</span><span class="s6">) </span><span class="s4">// TODO 根据 id 决定标题显示的文本</span>
    <span class="s3">.</span><span class="s0">titleMode</span><span class="s6">(</span><span class="s0">NavigationTitleMode</span><span class="s3">.</span><span class="s0">Mini</span><span class="s6">)</span>
    <span class="s3">.</span><span class="s0">backButtonIcon</span><span class="s6">(</span><span class="s0">$r</span><span class="s6">(</span><span class="s2">'app.media.ic_public_arrow_left'</span><span class="s6">))</span>
  <span class="s1">}</span>
<span class="s1">}</span></pre>
</body>
</html>